@(stops: List[Stop], search_phrase: String)

@main("ITRACT: Stops") {
    
    <ul class="content">
    @for(stop <- stops) {
        <a href="/stop/@stop.stop_id"><li>@stop.stop_name</li></a>
    }
    </ul>

<!--<script src="@routes.Assets.at("javascripts/markerclusterer.js")" type="text/javascript"></script>-->
<script src="@routes.Assets.at("javascripts/markerclusterer_compiled.js")" type="text/javascript"></script>
<script>
  var map;
  function initialize() {
    var mapOptions = {
      zoom: 7,
      center: new google.maps.LatLng(52.27,5.76, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'),
        mapOptions);
        
    var markers = [];

    var json = (function () {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': '../stopsAsJson/@search_phrase',
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
    })();
    
    for (var i = 0; i < json.length; i++) {
      var latLng = new google.maps.LatLng(json[i].stop_lat,json[i].stop_lon);
      var marker = new google.maps.Marker({
        position: latLng,
        title: json[i].stop_name
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
}